import React, { Component } from 'react'
import { connect } from 'react-redux'
import { initCartData,getToCart } from '@/store/actionCreator'
import styled from 'styled-components'

const SpanBtn = styled.div`
    width: 100px;
    height: 40px;
    text-align:center;
    border-radius: 4px;
    background: #ccc;
    line-height: 40px;
    font-size: 30px;
`;

 class DeliveryHome extends Component {
  render() {
    console.log(this.props.initCartData, 'i----')
    return (
      <div>
        { 
         this.props.initCartData && this.props.initCartData.map((item, index) => {
           return (
             <div key={index}>
               <img src={item.imgs} />
               <SpanBtn onClick={() => this.props.toCart(index)}>+</SpanBtn>
             </div>
           )
         })
        }
      </div>
    )
  }

  componentDidMount() {
    this.props.getAjax()
  }
}

const mapState = (state) => {
  return {
    initCartData: state.cart.initCartData
  }
}

const mapActions = (dispatch) => {
  return {
    getAjax() {
      dispatch(initCartData())
    },
    toCart(index) {
      dispatch(getToCart(index))
    }
  }
}

export default connect(mapState, mapActions)(DeliveryHome)
